import React from "react";
import {Button, Card, Col, Layout, Menu, Row} from 'antd';
import {Footer} from "antd/es/layout/layout";
import {Link} from "react-router-dom";
import axios from "axios";

const { Header, Sider, Content } = Layout;
export default class LikeList extends React.Component{
    constructor(props) {
        super(props);
        this.state=({
            user:this.props.location.state.user,
            likeList:[]
        })
    }
    componentDidMount() {
        this.getLikeList();
    }

    getLikeList=()=>{
        axios.get("http://localhost:8080/book/likeList",
            {
                params:{
                    userId:this.state.user.userId
                }
            }).then(
            (res)=>{
                this.setState({
                    likeList:res.data
                })
            }
        )
    }

    noLike=(bookId)=>{
        axios.get("http://localhost:8080/like/noLike",
            {params:{
                userId:this.state.user.userId,
                    bookId:bookId
                }}).then(
            (res)=>{
                this.componentDidMount();
            }
        )
    }

    state = {
        collapsed: false,
    };

    toggle = () => {
        this.setState({
            collapsed: !this.state.collapsed,
        });
    };

    render() {
        return (
            <Layout>
                <Sider
                    breakpoint="lg"
                    collapsedWidth="0"
                    onBreakpoint={broken => {
                        console.log(broken);
                    }}
                    onCollapse={(collapsed, type) => {
                        console.log(collapsed, type);
                    }}
                >
                    <div className="logo" />
                    <Menu theme="dark" mode="inline" defaultSelectedKeys={['2']} style={{marginTop:80}}>
                        <Menu.Item key="1">
                            <Link to={{
                                pathname: '/BookList',
                                state: {user: this.state.user}
                            }}>图书列表</Link>
                        </Menu.Item>
                        <Menu.Item key="2" >
                            <Link to={{
                                pathname: '/LikeList',
                                state: {user: this.state.user}
                            }}>收藏列表</Link>
                        </Menu.Item>
                        <Menu.Item key="3" >
                            <Link to={{
                                pathname: '/RecommendList',
                                state: {user: this.state.user}
                            }}>推荐列表</Link>
                        </Menu.Item>

                    </Menu>
                </Sider>
                <Layout>
                    <Header className="site-layout-sub-header-background" style={{ padding: 0 }} />
                    <Content style={{ margin: '24px 16px 0' }}>
                        <div className="site-layout-background" style={{ padding: 24, minHeight: 510 }}>
                            <Row>
                                {this.state.likeList.map((value) => {
                                    return (

                                        <Col span={6} style={{padding: 20}}>

                                            <Card bordered={true}
                                                  style={{border: '1px solid #ddd'}}
                                                  hoverable
                                                  cover={<img alt="example"
                                                              src={value.bookImgUrl}
                                                              style={{
                                                                  width: 150,
                                                                  height: 200,
                                                                  margin: '30px auto'
                                                              }}
                                                  />}
                                            >
                                                <a className="bookDetail" target="_blank" href={value.bookUrl}>{value.bookName}</a>

                                                <div className="bookDetail">{value.bookAuthor}</div>
                                                <div style={{marginBottom: 10}}></div>

                                                <Button type="primary" onClick={()=>this.noLike(value.bookId)}>取消收藏</Button>

                                            </Card>

                                        </Col>


                                    )
                                })}

                            </Row>
                        </div>
                    </Content>
                    <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
                </Layout>
            </Layout>
        );
    }

}